<template>
  <div class="manage-info-container">
    <van-tabs
      v-model="active"
      color="#3378ff"
      @click="onTabClick"
    >
      <van-tab title="维修工单">
        <div class="conten-work">
          <div class="search-box">
            <form action="/">
              <van-search
                v-model="searchOptions.searchKey"
                show-action
                shape="round"
                placeholder="搜索工单编号"
                @search="searchOptions.handleSearch"
                @clear='searchOptions.handleSearch'
              >
                <template #action>
                  <div
                    class="filter-box"
                    @click="searchOptions.handleFilter"
                  >
                    <i class="iconfont iconshaixuan"></i>
                    <span>筛选</span>
                  </div>
                </template>
              </van-search>
            </form>
          </div>
          <div class="handle-content scroll-box">
            <div
              class="stay-whole-box"
              @click="onOpenWorkOrderManageDetail(list.id)"
              v-for="list in listData"
              :key="list.id"
            >
              <div class="stay-whole-work-box">
                <div class="stay-whole-work-icon-box">
                  <i class="iconfont iconweixiugongdan stay-whole-icon-color"></i>
                </div>
                <div class="stay-whole-reight">
                  <div class="stay-whole-reight-top">
                    <p class="stay-whole-reight-text-left">{{list.order_no}}</p>
                    <div class="stay-whole-reight-text-reight">
                      <div
                        class="whole-work-state-icon-box"
                        v-if="list.status===1"
                      >
                        <i class="iconfont iconbianji whole-work-state-icon-color"></i>
                      </div>
                      <div
                        class="whole-work-state-icon-box whole-work-state-icon-box-D695F4"
                        v-if="list.status===2"
                      >
                        <i class="iconfont iconshangyi whole-work-state-icon-color"></i>
                      </div>
                      <div
                        class="whole-work-state-icon-box whole-work-state-icon-box-C5DF5D"
                        v-if="list.status===3"
                      >
                        <i class="iconfont iconxiayi whole-work-state-icon-color"></i>
                      </div>
                      <div
                        class="whole-work-state-icon-box whole-work-state-icon-box-81E4A9"
                        v-if="list.status===4"
                      >
                        <i class="iconfont icontianjiawancheng whole-work-state-icon-color"></i>
                      </div>
                      <div
                        class="whole-work-state-icon-box whole-work-state-icon-box-F4A476"
                        v-if="list.status===5"
                      >
                        <i class="iconfont iconguanbi-01 whole-work-state-icon-color"></i>
                      </div>
                      {{typeStatus[list.status-1]}}
                    </div>
                  </div>
                  <p class="stay-reight-text-bootem">设备编号：{{list.device_number}}</p>
                  <div class="stay-whole-reight-top">
                    <p class="stay-whole-reight-text-bootem">{{list.sourceText}}</p>
                    <p class="stay-whole-reight-text-bootem">{{list.updated_time}}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </van-tab>
      <van-tab title="保养工单">
        <div class="conten-work">
          <div class="search-box">
            <form action="/">
              <van-search
                v-model="searchOptions.searchKey"
                show-action
                shape="round"
                placeholder="搜索工单编号"
                @search="searchOptions.handleSearch"
                @clear='searchOptions.handleSearch'
              >
                <template #action>
                  <div
                    class="filter-box"
                    @click="searchOptions.handleFilter"
                  >
                    <i class="iconfont iconshaixuan"></i>
                    <span>筛选</span>
                  </div>
                </template>
              </van-search>
            </form>
          </div>
          <div class="handle-content scroll-box">
            <div
              class="stay-whole-box"
              @click="onOpenWorkOrderManageDetail(list.id)"
              v-for="list in listData"
              :key="list.id"
            >
              <div class="stay-whole-work-box">
                <div class="stay-whole-work-icon-box stay-work-icon-box-green">
                  <i class="iconfont iconbaoyanggongdan1 stay-whole-icon-color stay-icon-color-green "></i>
                </div>
                <div class="stay-whole-reight">
                  <div class="stay-whole-reight-top">
                    <p class="stay-whole-reight-text-left">{{list.order_no}}</p>
                    <div class="stay-whole-reight-text-reight">
                      <div
                        class="whole-work-state-icon-box"
                        v-if="list.status===1"
                      >
                        <i class="iconfont iconbianji whole-work-state-icon-color"></i>
                      </div>
                      <div
                        class="whole-work-state-icon-box whole-work-state-icon-box-D695F4"
                        v-if="list.status===2"
                      >
                        <i class="iconfont iconshangyi whole-work-state-icon-color"></i>
                      </div>
                      <div
                        class="whole-work-state-icon-box whole-work-state-icon-box-C5DF5D"
                        v-if="list.status===3"
                      >
                        <i class="iconfont iconxiayi whole-work-state-icon-color"></i>
                      </div>
                      <div
                        class="whole-work-state-icon-box whole-work-state-icon-box-81E4A9"
                        v-if="list.status===4"
                      >
                        <i class="iconfont icontianjiawancheng whole-work-state-icon-color"></i>
                      </div>
                      <div
                        class="whole-work-state-icon-box whole-work-state-icon-box-F4A476"
                        v-if="list.status===5"
                      >
                        <i class="iconfont iconguanbi-01 whole-work-state-icon-color"></i>
                      </div>
                      {{typeStatus[list.status-1]}}
                    </div>
                  </div>
                  <p class="stay-reight-text-bootem">设备编号：{{list.device_number}}</p>
                  <div class="stay-whole-reight-top">
                    <p class="stay-whole-reight-text-bootem">{{list.sourceText}}</p>
                    <p class="stay-whole-reight-text-bootem">{{list.updated_time}}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </van-tab>

    </van-tabs>

    <SearchFilter
      v-show="showFilterOrder"
      @submitSearch="submitFilter"
      :typeOrder="active"
      ref="searchOrder"
    />
  </div>
</template>

<script>
import SearchFilter from '../components/SearchFilterWorkOrder.vue';
import { getOrderList } from '@/api/maintenanceEngineer';
import { Tab, Tabs, Search, Button, Dialog } from 'vant';
export default {
  name: 'StayWorkDetail',
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Search.name]: Search,
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    SearchFilter
  },
  data() {
    return {
      active: 0, //tab标签
      searchOptions: {
        searchKey: '',
        handleSearch: this.handleSearch,
        handleFilter: this.handleFilter
      },
      showFilterOrder: false,
      seachData: '', //筛选的值
      listData: '', //列表数据
      typeStatus: ['已创建', '已指派', '已接单', '已完成', '已取消'] //1已创建 2已派单 3已接单 4已完成 5已取消
    };
  },
  mounted() {
    this.onListData();
  },
  methods: {
    //tab标签页点击事件
    onTabClick(name, title) {
      this.searchOptions.searchKey = '';
      if (this.seachData !== '') {
        this.seachData.orderSource = '';
        this.seachData.orderStatus = '';
        this.seachData.startTime = '';
        this.seachData.endTiem = '';
      }
      //初始化筛选弹窗的值
      this.$refs.searchOrder.createOrderSourceData();
      this.$refs.searchOrder.createOrderStatusData();
      this.$refs.searchOrder.startTime = '点击选择';
      this.$refs.searchOrder.endTime = '点击选择';
      this.$refs.searchOrder.currentDate = new Date();

      this.$forceUpdate();
      this.onListData();
    },
    // 搜索
    handleSearch() {
      this.onListData();
    },
    // 筛选
    handleFilter() {
      this.showFilterOrder = true;
    },
    // 确定筛选条件
    submitFilter(parm) {
      this.seachData = parm;
      this.showFilterOrder = false;
      this.onListData();
    },
    //列表数据
    onListData() {
      let params = {
        page: 1, //当前页
        page_size: 9999, //每页显示数据条数
        order_no: this.searchOptions.searchKey,
        order_type: this.active === 0 ? 1 : 2,
        source: this.seachData.orderSource,
        status: this.seachData.orderStatus,
        date_start: this.seachData.startTime,
        date_end: this.seachData.endTiem
      };
      getOrderList(params).then(res => {
        res.data.list.map(item => {
          if (item.source === 2 && item.order_type === 1) {
            item.sourceText = '报警转工单';
          } else if (item.source === 2 && item.order_type === 2) {
            item.sourceText = '保养转工单';
          } else if (item.source === 1) {
            item.sourceText = '手动创建';
          } else if (item.source === 3) {
            item.sourceText = '上报工单';
          }
        });
        this.listData = res.data.list;
      });
    },

    //跳转详情页面
    onOpenWorkOrderManageDetail(valIndex) {
      if (this.$checkBtnPermission('maintenanceCenter:workOrderManage:list:detail')) {
        this.$router.push({
          name: 'workOrderManageDetail',
          query: {
            id: valIndex
          }
        });
      } else {
        this.$toast(this.$store.state.noDetailPermissionText);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.manage-info-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  ::v-deep .van-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;

    .van-tabs__wrap {
      flex-shrink: 0;
    }

    .van-tabs__content {
      flex: 1;
      height: 0;

      .van-tab__pane {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.conten-work {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.handle-content {
  flex: 1;
}
//筛选
.search-box {
  width: 100%;
  height: 1.6rem;
  margin-bottom: 0.213333rem;
  // padding: 0.4rem 0.426667rem;
  background-color: #fff;
  border-top: 1px solid #f2f6fc;
  .filter-box {
    display: flex;
    align-items: center;
    font-size: 0.373333rem;
    color: #666666;

    i {
      margin-right: 0.053333rem;
    }
  }
}

//全部工单
.stay-whole-box {
  width: 100%;
  height: 2.613333rem;
  margin-bottom: 0.213333rem;
  padding: 0.4rem 0.426667rem;
  background-color: #fff;
  .stay-whole-work-box {
    display: flex;
  }
  .stay-whole-work-icon-box {
    width: 1.12rem;
    height: 1.12rem;
    background: #ebf1ff;
    border-radius: 0.8rem;
    margin-right: 0.32rem;
    margin-top: 0.32rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .stay-whole-icon-color {
    color: #3378ff;
    font-size: 0.533333rem;
  }
  .stay-whole-reight {
    width: 7.733333rem;
    position: relative;
    padding-left: 0.32rem;
  }
  .stay-whole-reight:before {
    content: '';
    position: absolute;
    top: -0.026667rem;
    left: 0;
    width: 1px;
    height: 1.813333rem;
    background-color: #f2f6fc;
  }

  .stay-whole-reight-top {
    display: flex;
    justify-content: space-between;
  }
  .stay-whole-reight-text-left {
    font-size: 0.4rem;
    color: #333333;
  }
  .stay-whole-reight-text-reight {
    font-size: 0.32rem;
    color: #999999;
    display: flex;
  }
  .whole-work-state-icon-box {
    width: 0.533333rem;
    height: 0.533333rem;
    background: #54b7ff;
    border-radius: 0.8rem;
    text-align: center;
    padding-top: 0.08rem;
    padding-left: 1px;
    margin-right: 0.133333rem;
    margin-top: -0.08rem;
  }
  .whole-work-state-icon-box-D695F4 {
    background: #d695f4 !important;
  }
  .whole-work-state-icon-box-C5DF5D {
    background: #c5df5d !important;
  }
  .whole-work-state-icon-box-81E4A9 {
    background: #81e4a9 !important;
  }
  .whole-work-state-icon-box-F4A476 {
    background: #f4a476 !important;
  }
  .whole-work-state-icon-color {
    color: #fff;
    font-size: 0.32rem;
  }

  .stay-reight-text-bootem {
    font-size: 0.346667rem;
    color: #666666;
    margin-top: 0.32rem;
    margin-bottom: 0.32rem;
  }
  .stay-whole-reight-text-bootem {
    font-size: 0.32rem;
    color: #999999;
  }
  .stay-icon-color-green {
    color: #67c23a !important;
  }
  .stay-work-icon-box-green {
    background: #f0f9eb !important;
  }
}
</style>